@use '../../mixins' as *;

.symbol-selector__toggle {
  border: var(--border-default);
  border-radius: var(--border-radius);
  width: 80px;
  cursor: pointer;
  padding: var(--spacing-quarter-unit) var(--spacing-quarter-unit) 3px var(--spacing-quarter-unit);
  @include clearfix();
}

.symbol-selector__toggle--dark {
  background-color: var(--color-background-inverse);
}

.symbol-selector__toggle__option {
  float: left;
}

.symbol-selector__toggle__caret {
  float: right;
  fill: var(--color-text-light);
  padding-top: var(--spacing-eighth-unit);
  // prevent user agent override
  width: 13px !important;
  height: 13px !important;
}

.symbol-selector__menu {
  max-width: 225px;
  position: absolute;
  @include z-index('orbit');
  border: var(--border-default);
  padding: var(--spacing-half-unit);
  box-shadow: 2px 2px var(--spacing-half-unit) var(--color-border-light);
  border-radius: var(--border-radius-small);
  left: var(--spacing-base-unit);
}

.symbol-selector__item {
  display: inline;
}

.symbol-selector__symbol {
  &:hover {
    background-color: var(--color-border-default);
  }
}
